<template>
  <div class="mod-user">
    <el-form :inline="true" @keyup.enter="getDataList()">
      <el-form-item label="订单编号:">
        <el-select v-model="queryParameter.uid" placeholder="请选择分部" width="30px">
          <el-option
            v-for="item in vipLevel3User"
            :key="item.userId"
            :label="item.nickName"
            :value="item.userId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getDataList()">
          查询
        </el-button>
        <el-button @click="clearDatas()"> 清空 </el-button>
      </el-form-item>
      <el-form-item label="查看节点类型:">
        <el-radio-group v-model="queryType">
          <el-radio :label="0">查看用户信息</el-radio>
          <el-radio :label="1">查看用户订单信息</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="24">
        <div class="container" id="container">
          <TreeChart :json="treeData" @click-node="clickNode" />
        </div>
      </el-col>
    </el-row>

    <el-dialog
      v-model="dialogData.userInfoShow"
      title="用户信息"
      :close-on-click-modal="false"
    >
      <el-descriptions title="用户信息">
        <el-descriptions-item label="用户账号:">{{dialogData.userInfoData.nickName}}</el-descriptions-item>
        <el-descriptions-item label="真实姓名:">{{dialogData.userInfoData.realName}}</el-descriptions-item>
        <el-descriptions-item label="手机号:">{{dialogData.userInfoData.userMobile}}</el-descriptions-item>
        <el-descriptions-item label="vip等级:">
          <el-tag v-if="dialogData.userInfoData.vipLevel == 0" size="small">普通会员</el-tag>
          <el-tag v-else-if="dialogData.userInfoData.vipLevel == 1" size="small">vip</el-tag>
          <el-tag v-else-if="dialogData.userInfoData.vipLevel == 2" size="small">svip</el-tag>
          <el-tag v-else-if="dialogData.userInfoData.vipLevel == 3" size="small">分部</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="奖励余额:">
          {{dialogData.userInfoData.distributionBonus}}
        </el-descriptions-item>
        <el-descriptions-item label="下单给我奖励的用户:">{{dialogData.userInfoData.reward2YuanNickName}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
   
   
    <el-dialog
      v-model="dialogData.userOrderShow"
      title="用户订单信息"
      :close-on-click-modal="false"
      class="mod-order-order"
    >
      <div
          v-for="order in dialogData.userOrderData"
          :key="order.orderId"
          class="prod"
        >
          <div class="prod-tit">
            <span>订单编号：{{ order.orderNumber }}</span>
            <span>下单时间：{{ order.createTime }}</span>
          </div>
          <div class="prod-cont">
            <el-row style="width:100%">
              <el-col :span="12">
                <div class="prod-item">
                  <div
                    v-for="orderItem in order.orderItems"
                    :key="orderItem.orderItemId"
                    class="items name"
                  >
                    <div class="prod-image">
                      <img
                        alt=""
                        :src="resourcesUrl + orderItem.pic"
                        style="height:100px;width: 100px;"
                      >
                    </div>
                    <div class="prod-name">
                      <span>{{ orderItem.prodName }}</span>
                      <span class="prod-info">{{ orderItem.skuName }}</span>
                    </div>
                    <div class="prod-price">
                      <span>￥{{ orderItem.price }}</span>
                      <span>×{{ orderItem.prodCount }}</span>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col
                :span="3"
                style="height: 100%;"
              >
                <div class="item">
                  <div>
                    <span class="totalprice">￥{{ order.actualTotal }}</span>
                    <span v-if="order.freightAmount">（含运费：￥{{ order.freightAmount }}）</span>
                    <span>共{{ order.productNums }}件</span>
                  </div>
                </div>
              </el-col>
              <el-col
                :span="3"
                style="height: 100%;"
              >
                <div class="item">
                  <div>
                    <span v-if="order.payType === 1">微信支付</span>
                    <span v-else-if="order.payType === 2">支付宝</span>
                    <span v-else>手动代付</span>
                  </div>
                </div>
              </el-col>
              <el-col
                :span="3"
                style="height: 100%;"
              >
                <div class="item">
                  <span
                    v-if="order.status === 1"
                    type="danger"
                  >待付款</span>
                  <span
                    v-else-if="order.status === 2"
                    type="danger"
                  >待发货</span>
                  <span
                    v-else-if="order.status === 3"
                    type="danger"
                  >待收货</span>
                  <span
                    v-else-if="order.status === 4"
                    type="danger"
                  >待评价</span>
                  <span
                    v-else-if="order.status === 5"
                    type="danger"
                  >成功</span>
                  <span
                    v-else
                  >失败</span>
                </div>
              </el-col>
              <el-col
                :span="3"
                style="height: 100%;"
              >
                <div class="item">
                  <div class="operate">
                    <!--<el-button
                      v-if="isAuth('order:order:update')"
                      type="text"
                      @click="onAddOrUpdate(order.orderNumber)"
                    >
                      查看
                    </el-button>-->
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="remark">
            <div class="buyer-remark">
              <span>备注:{{ order.remarks }}</span>
            </div>
          </div>
        </div>
        <el-pagination
          :current-page="page.pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="page.pageSize"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
        />
    </el-dialog>
  </div>
</template>

<script setup>
import { isAuth } from "@/utils";
import TreeChart from "vue-tree-chart-3";
const resourcesUrl = import.meta.env.VITE_APP_RESOURCES_URL
/**
 * 获取数据列表
 */
const getDataList = () => {
  http({
    url: http.adornUrl("/branchOperate/branchOperate/getVipLevel3UserLowerLevel"),
    method: "get",
    params: http.adornParams(
      Object.assign(
        {
          vipLevel3User: queryParameter.uid,
        },
        {}
      )
    ),
  }).then(({ data }) => {
    treeData.value = data[0];
  });
};

/**
 * 条件查询
 */
const onSearch = (params, done) => {
  getDataList(page, params, done);
};

const vipLevel3User = ref([]);
const getVipLevel3User = () => {
  http({
    url: http.adornUrl(`/admin/user/getAll`),
    method: "get",
    params: http.adornParams({
      vipLevel: 3,
    }),
  })
    .then(({ data }) => {
      vipLevel3User.value = data;
    })
    .catch(function (err) {});
};

const queryParameter = reactive({
  uid: "",
});

const dialogShow = ref(false);
const distributionBonusList = ref([]);
const openDistributionBonus = (list) => {
  dialogShow.value = true;
  distributionBonusList.value = list;
};

onMounted(() => {
  getVipLevel3User();
});

const treeData = ref({
  /*name: "root",
  image_url: "https://static.refined-x.com/avat.jpg",
  class: ["rootNode"],
  children: [
    {
      name: "children1",
      image_url: "https://static.refined-x.com/avat1.jpg",
    },
    {
      name: "children2",
      image_url: "https://static.refined-x.com/avat2.jpg",
      children: [
        {
          name: "grandchild",
          image_url: "https://static.refined-x.com/avat.jpg",
        },
        {
          name: "grandchild2",
          image_url: "https://static.refined-x.com/avat1.jpg",
        },
        {
          name: "grandchild3",
          image_url: "https://static.refined-x.com/avat2.jpg",
        },
      ],
    },
    {
      name: "children3",
      image_url: "https://static.refined-x.com/avat.jpg",
    },
  ],*/
});

const dialogData = ref({
  userInfoShow: false,
  userInfoData: {},
  userOrderShow: false,
  userOrderData: [],
});

const queryType = ref(0);


const page = reactive({
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
})

const getUserOrderInfo = () => {
  http({
    url: http.adornUrl('/branchOperate/branchOperate/getUserOrderInfo'),
    method: 'get',
    params: http.adornParams(
      Object.assign(
        {
          current: page.currentPage,
          size: page.pageSize,
          userId:userId.value
        },
        {
          
        }
      ), false
    )
  })
    .then(({ data }) => {
      dialogData.value.userOrderData = data.records
      page.total = data.total
    })
}

/**
 * 每页数
 * @param val
 */
const sizeChangeHandle = (val) => {
  page.pageSize = val
  page.currentPage = 1
  getUserOrderInfo(page)
}
/**
 * 当前页
 * @param val
 */
const currentChangeHandle = (val) => {
  page.currentPage = val
  getUserOrderInfo(page)
}


const userId = ref("");

const clickNode = (node) => {
  //用户ID:node.id
  userId.value = node.id;
  if (queryType.value == 0) {
    //查看用户信息
    dialogData.value.userInfoShow=true;
    http({
      url: http.adornUrl(`/branchOperate/branchOperate/getUserInfo`),
      method: "get",
      params: http.adornParams({
        uid: node.id,
      }),
    })
      .then(({ data }) => {
        dialogData.value.userInfoData = data;
      })
      .catch(function (err) {});
  } else if (queryType.value == 1) {
    //查看用户订单信息
    dialogData.value.userOrderShow=true;
    getUserOrderInfo();
  }
};
</script>
<style scoped lang="scss"></style>

<style scoped>
/** lang="scss" 时,>>> 不生效 */
.container >>> .person {
  width: 11em !important;
}
.container >>> td {
  padding: 0px 0 35px 0;
}
</style>


<style lang="scss" scoped>
.mod-order-order {
  .tit {
    display: flex;
    height: 45px;
    align-items: center;
  }

  .tit {
    .item {
      padding: 0 10px;
      width: 10%;
      text-align: center;
    }

    .product {
      width: 25%;
    }
  }

  .prod-tit {
    padding: 10px;
    background: #f8f8f9;
    border-left: 1px solid #dddee1;
    border-top: 1px solid #dddee1;
    border-right: 1px solid #dddee1;

    span {
      margin-right: 15px;
    }
  }

  .prod-cont {
    display: flex;
    border-top: 1px solid #dddee1;
    border-bottom: 1px solid #dddee1;
    border-left: 1px solid #dddee1;
    color: #495060;

    .item {
      display: flex;
      display: -webkit-flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      border-right: 1px solid #dddee1;
      text-align: center;
      height: 100%;

      span {
        display: block;
      }
    }

    .prod-item {
      display: flex;
      flex-direction: column;
      border-right: 1px solid #dddee1;
    }

    .items.name {
      display: flex;
      position: relative;
      padding: 20px;
      border-bottom: 1px solid #dddee1;

      &:last-child {
        border-bottom: none;
      }
    }
  }

  .prod-name {
    width: 55%;
    text-align: left;

    .prod-info {
      display: block;
      color: #80848f;
      margin-top: 30px;
    }
  }

  .prod-price {
    position: absolute;
    right: 40px;
    text-align: right;

    span {
      display: block;
      margin-bottom: 10px;
    }
  }

  .prod-image {
    margin-right: 20px;
    width: 100px;
    height: 100px;

    img {
      width: 100px;
      height: 100px;
    }
  }

  .item {
    span {
      display: block;
      margin-bottom: 10px;
    }

    .operate {
      color: #2d8cf0;
    }

    .totalprice {
      color: #c00;
    }
  }

  .prod {
    .remark {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background-color: #e8f7f6;
      border-left: 1px solid #dddee1;
      border-right: 1px solid #dddee1;
      border-bottom: 1px solid #dddee1;
      margin-bottom: 20px;
    }
  }

  .buyer-remark {
    padding: 0 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .empty-tips {
    display: block;
    width: 100%;
    text-align: center;
    margin: 50px 0;
    color: #999;
  }
}
</style>
